<template>
<div class="box">
  <div class="home">
    <!-- 搜索框 -->
    <router-link to="/Search">
      <van-search
        input-align="center"
        v-model="value"
        shape="round"
        background="pink"
        placeholder="搜索"
      />
      </router-link>
   
    <!--导航栏 -->
     
        <van-tabs v-model="active">
      <!-- 把axios数据库里面的数据渲染到里面 -->
         <van-tab
           :title="item.name"
           v-for="item in cate"
           :key="item._id" ></van-tab>
     
       </van-tabs>
   </div> 
    <!-- 身体部分 -->
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoads"
>
    <div class="articleList">
      <!-- 下拉刷新组件 -->
     <van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
      <!-- 里面放文章内容数据 -->
      <!-- 点击获取数据 -->
      
      <li v-for="(item,index) in loog" :key="item.id" @click="headTitle(index)">
             <h3 > {{ item.title }}</h3>
        <br />
        <div
          :class="{
            none: item.poster_type == 1,
            none1: item.poster_type == 2,
            none2: item.poster_type == 3,
          }"
        >
          <img :src="img" v-for="img in item.imageSrc" alt="" :key="img" />
        </div>
        <van-row type="flex" justify="space-between">
          <van-col span="6">作者：{{ item.author }}</van-col>
          <van-col span="6">{{ item.fav }}评论</van-col>
          <van-col span="6">{{ item.time | dateFormate }}</van-col>
        </van-row>
      </li>
    
      </van-pull-refresh>
    </div>
      </van-list>
      <!-- 懒加载 -->
      <!-- <div>
        <img v-for=" imageSrc in ( imageList,index)" :key="imageSrc" v-lazy="imageSrc"/>
      </div> -->
  </div>
</template>

<script>



import { Toast } from 'vant';
import { Calendar } from "vant";

// @ is an alias to /src

export default {
  data() {
    return { 
      // imageSrc:[],
      //  imageList : [],
      index:0,
      data: "",
      show: true,
      value: "",
      active: 0,
      cate: [],
      loog: [],
       count: 0,
      isLoading: false,
      list: [],
      loading: true,
      finished: false,
    }
  },
 async created() {
   const res = await  this.$http.post("/api/get_cate_list")
   console.log(res);
    this.cate = res.data.data;
    this.getCates();
  },
  computed: {
    // 让cate-id 通过索引的方式获取里面的具体id用函数进行if语句判断获取新的id
    cate_id() {
      return this.cate[this.active]._id;
    },
  },
  watch: {
    active() {
      this.getCates();
      console.log(this.cate_id);
    },
  },
  
  methods: {
    // 上拉加载
    onLoads(){
       console.log('你触发了事件');
       this.skip++
       this.getCates()
    },
    // 获取文章列表数据
  async  getCates() {
      let { cate_id } = this;
      const res = await this.$http.post("/api/get_article_list", {
          // 请求参数
          cate_id,
        })         
        this.loading= false,                                                                                                                                   
        this.loog = res.data.data
        // this.loog=[...this.loog,...res.data.data]
        console.log(res.data);
 
        if(res.length==0)
        {
              this.finished= true
        }
       
        
    },
      // 上拉刷新
     onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
     },
       onLoad() {
      //异步更新数据
    //  setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 50; i++) {
          this.loog.push(this.loog.length + 1);
        }

      //   // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.loog.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    // 文章详情点击跳转
    },
    headTitle(index){
      let aa = this.loog[index]._id
       let title = this.loog[index].title
      //  let picture =this.loog[index].
      console.log(aa);
      console.log(title);
      this.$router.push({
        name:'Article',
        query:{
          title:title,
          id:aa
        }
      })
      //  this.$router.push({
      //   name:'Record',
      //   query:{
      //     title:title,
      //     id:aa
      //   }
      // })
     
    }
  },
  name: "HomeView",
  components: {
    [Calendar.name]: Calendar,
  },
};
</script>
<style lang="less" scoped>

.home{
        width:  100%;
        position:fixed;
        top: 0;
        z-index: 2;
}
.articleList {
  margin-top:100px ;
  overflow: hidden;
  img {
    max-width: 80%;
  }
}
.none2 img {
  width: 100px;
  height: 56px;
}
li {
  list-style: none;
}
h3 {
  text-align: left;
  margin-left: 20px;
}

.van-row {
  font-size: 4px;
  white-space: nowrap;
}
</style>